<template>
    <div class="father">

        <slot name="s"></slot>
        <!-- ：titles定义对象属性为titles值为listTitles -->
        <slot name="s1" :titles="listTitles"></slot>
        <slot name="s2"></slot>
    </div>
</template>

<script setup lang="ts" name="Category">
import {reactive} from "vue";
let listTitles = reactive([
    { id: Math.random(), title: '极品飞车' }, { id: Math.random(), title: '王者荣耀' },
    { id: Math.random(), title: '梦幻西游' }, { id: Math.random(), title: '地下城与勇士' }
])

</script>

<style scoped>
.father {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    background-color: #f9f9f9;
}
</style>
